CSS Custom Highlight API: Mistrzostwo w Stylizowaniu Zaznaczenia Tekstu

Skromna czynność zaznaczania tekstu na stronie internetowej jest czymś, co większość użytkowników wykonuje bez zastanowienia. Jednak jako deweloperzy często dążymy do ulepszenia nawet najsubtelniejszych interakcji. CSS Custom Highlight API pozwala nam zrewolucjonizować doświadczenie zaznaczania tekstu, oferując bezprecedensową kontrolę nad jego wyglądem. Ta możliwość wykracza poza proste zmiany koloru tła i tekstu, pozwalając na tworzenie złożonych i angażujących interfejsów użytkownika.

Czym jest CSS Custom Highlight API?

CSS Custom Highlight API to nowoczesny standard internetowy, który umożliwia stylizowanie wyglądu zaznaczeń tekstu (i innych podświetlonych zakresów) za pomocą CSS. Wprowadza on pseudo-element ::highlight(), który odnosi się do określonych zakresów tekstu na podstawie kryteriów zdefiniowanych przez dewelopera. To API przezwycięża ograniczenia tradycyjnego pseudo-elementu ::selection, który oferuje bardzo podstawowe opcje stylizacji. Dzięki Custom Highlight API można tworzyć wysoce spersonalizowane i świadome kontekstu style zaznaczania tekstu.

Dlaczego warto używać CSS Custom Highlight API?

Custom Highlight API oferuje kilka zalet w porównaniu z tradycyjnymi metodami stylizacji zaznaczeń tekstu:

• Poprawione doświadczenie użytkownika: Twórz atrakcyjne wizualnie i informacyjne zaznaczenia tekstu, które prowadzą użytkowników i poprawiają czytelność.
• Stylizacja zależna od kontekstu: Stosuj różne style w zależności od treści zaznaczonego tekstu, takie jak podświetlanie fragmentów kodu lub podkreślanie kluczowych terminów.
• Zwiększona dostępność: Zapewnij wyraźne wizualne wskazówki dla zaznaczonego tekstu, ułatwiając użytkownikom z wadami wzroku nawigację po treści.
• Możliwość personalizacji wyglądu: Wyjdź poza podstawowe zmiany koloru tła i tekstu, aby tworzyć unikalne i angażujące style zaznaczania tekstu.
• Dynamiczna stylizacja: Zmieniaj wygląd zaznaczeń tekstu w oparciu o interakcje użytkownika lub stan aplikacji.

Zrozumienie kluczowych pojęć

Zanim przejdziemy do przykładów kodu, ważne jest, aby zrozumieć podstawowe koncepcje CSS Custom Highlight API:

1. Rejestracja podświetlenia

Proces rozpoczyna się od zarejestrowania niestandardowej nazwy podświetlenia za pomocą JavaScript. Ta nazwa będzie następnie używana w CSS do targetowania określonych zaznaczeń tekstu.

2. Zakresy podświetlenia

Zakresy podświetlenia definiują konkretne fragmenty tekstu do stylizacji. Zakresy te są tworzone programowo za pomocą API Highlight i StaticRange lub Range. Określają one punkty początkowe i końcowe tekstu do podświetlenia.

3. Pseudo-element ::highlight()

Ten pseudo-element jest używany w CSS do stosowania stylów do zarejestrowanych nazw podświetleń. Działa jako selektor, targetując fragmenty tekstu zdefiniowane przez zakresy podświetlenia.

Praktyczne przykłady: Implementacja CSS Custom Highlight API

Przyjrzyjmy się kilku praktycznym przykładom, aby zilustrować, jak używać CSS Custom Highlight API.

Przykład 1: Podstawowa stylizacja zaznaczenia tekstu

Ten przykład pokazuje, jak zmienić kolor tła i tekstu zaznaczonego fragmentu.

HTML:

            <p id="myText">This is some text that can be selected.</p>
            

              
                Copy
              
            
          

JavaScript:

            const myText = document.getElementById('myText');
const highlight = new Highlight();

// Select the entire paragraph.
highlight.add(new Range(myText.firstChild, 0, myText.firstChild, myText.firstChild.length));

CSS.highlights.set('myHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(myHighlight) {
  background-color: #ff0;
  color: #000;
}
            

              
                Copy
              
            
          

Wyjaśnienie:

• Kod JavaScript tworzy obiekt Highlight i dodaje zakres obejmujący cały akapit o ID myText.
• Metoda CSS.highlights.set() rejestruje podświetlenie pod nazwą 'myHighlight'.
• Kod CSS używa pseudo-elementu ::highlight(myHighlight) do stylizacji zaznaczonego tekstu z żółtym tłem i czarnym kolorem czcionki.

Przykład 2: Podświetlanie określonych słów

Ten przykład pokazuje, jak podświetlić określone słowa w akapicie.

HTML:

            <p id="myText">This is a paragraph with the word highlight that we want to highlight.</p>
            

              
                Copy
              
            
          

JavaScript:

            const myText = document.getElementById('myText');
const highlight = new Highlight();
const textContent = myText.textContent;
const wordsToHighlight = ['highlight'];

wordsToHighlight.forEach(word => {
  let index = textContent.indexOf(word);
  while (index !== -1) {
    highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + word.length));
    index = textContent.indexOf(word, index + 1);
  }
});

CSS.highlights.set('keywordHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(keywordHighlight) {
  background-color: lightgreen;
  font-weight: bold;
}
            

              
                Copy
              
            
          

Wyjaśnienie:

• Kod JavaScript iteruje po słowach w akapicie i identyfikuje indeksy słowa "highlight".
• Dla każdego wystąpienia tworzy obiekt Range i dodaje go do obiektu Highlight.
• Kod CSS stylizuje podświetlone słowa jasnozielonym tłem i pogrubioną czcionką.

Przykład 3: Dynamiczne podświetlanie na podstawie danych wejściowych użytkownika

Ten przykład pokazuje, jak dynamicznie podświetlać tekst na podstawie danych wprowadzonych przez użytkownika w polu wyszukiwania.

HTML:

            <input type="text" id="searchInput" placeholder="Enter text to highlight">
<p id="myText">This is some text that will be dynamically highlighted based on user input.</p>
            

              
                Copy
              
            
          

JavaScript:

            const searchInput = document.getElementById('searchInput');
const myText = document.getElementById('myText');
const highlight = new Highlight();

searchInput.addEventListener('input', () => {
  const searchTerm = searchInput.value;
  highlight.clear(); // Clear previous highlights

  if (searchTerm) {
    const textContent = myText.textContent;
    let index = textContent.indexOf(searchTerm);
    while (index !== -1) {
      highlight.add(new Range(myText.firstChild, index, myText.firstChild, index + searchTerm.length));
      index = textContent.indexOf(searchTerm, index + 1);
    }
  }

  CSS.highlights.set('searchHighlight', highlight);
});
            

              
                Copy
              
            
          

CSS:

            ::highlight(searchHighlight) {
  background-color: yellow;
  color: black;
}
            

              
                Copy
              
            
          

Wyjaśnienie:

• Kod JavaScript nasłuchuje na zmiany w polu wyszukiwania.
• Czyści wszelkie istniejące podświetlenia, a następnie wyszukuje wprowadzony tekst w akapicie.
• Dla każdego wystąpienia tworzy obiekt Range i dodaje go do obiektu Highlight.
• Kod CSS stylizuje dynamicznie podświetlony tekst żółtym tłem i czarnym kolorem czcionki.

Przykład 4: Personalizacja wyglądu podświetlenia za pomocą ::highlight()

Siła Custom Highlight API tkwi w jego zdolności do personalizacji wyglądu i odczuć podświetlonego tekstu. Oto jak można zastosować cienie, gradienty i inne efekty wizualne.

HTML:

            <p id="customText">Select this text to see a custom highlight effect.</p>
            

              
                Copy
              
            
          

JavaScript:

            const customText = document.getElementById('customText');
const highlight = new Highlight();
highlight.add(new Range(customText.firstChild, 0, customText.firstChild, customText.firstChild.length));
CSS.highlights.set('fancyHighlight', highlight);
            

              
                Copy
              
            
          

CSS:

            ::highlight(fancyHighlight) {
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
}
            

              
                Copy
              
            
          

Wyjaśnienie:

• Ten przykład stosuje tło z gradientem liniowym, biały tekst, cień tekstu, zaokrąglone rogi i dopełnienie do podświetlonego tekstu.
• Pokazuje to, jak można używać standardowych właściwości CSS w pseudo-elemencie ::highlight(), aby uzyskać atrakcyjne wizualnie i unikalne style zaznaczania.

Kwestie dostępności

Chociaż ulepszanie wizualnego wyglądu zaznaczeń tekstu jest ważne, dostępność powinna zawsze być głównym priorytetem. Oto kilka wskazówek, aby zapewnić, że Twoje niestandardowe style podświetlania są dostępne:

• Kontrast kolorów: Zapewnij wystarczający kontrast między tłem a kolorem tekstu podświetlonego fragmentu. Użyj narzędzi takich jak WebAIM Contrast Checker, aby zweryfikować zgodność ze standardami dostępności (WCAG).
• Wizualne wskazówki: Zapewnij wyraźne wizualne wskazówki dla zaznaczonego tekstu. Unikaj subtelnych zmian kolorów, które mogą być trudne do zauważenia dla użytkowników z wadami wzroku.
• Nawigacja za pomocą klawiatury: Upewnij się, że niestandardowe style podświetlania nie zakłócają nawigacji za pomocą klawiatury. Użytkownicy powinni móc łatwo zaznaczać i nawigować po tekście za pomocą klawiatury.
• Kompatybilność z czytnikami ekranu: Przetestuj swoje niestandardowe style podświetlania z czytnikami ekranu, aby upewnić się, że zaznaczony tekst jest poprawnie odczytywany.

Kompatybilność z przeglądarkami

CSS Custom Highlight API to stosunkowo nowy standard internetowy, a kompatybilność z przeglądarkami może się różnić. Pod koniec 2023 / na początku 2024 roku wsparcie rośnie, ale nie jest jeszcze powszechnie zaimplementowane. Możesz sprawdzić aktualny stan wsparcia przeglądarek na stronach takich jak "Can I use...", aby być na bieżąco z aktualizacjami kompatybilności.

Rozważ użycie wykrywania funkcji, aby zapewnić style zastępcze dla przeglądarek, które jeszcze nie obsługują tego API.

            if ('CSS' in window && 'highlights' in CSS) {
  // Use the Custom Highlight API
} else {
  // Provide fallback styles using ::selection
}
            

              
                Copy
              
            
          

Rzeczywiste przypadki użycia

CSS Custom Highlight API ma wiele zastosowań w realnym świecie, w tym:

• Edytory kodu: Podświetlanie elementów składni, błędów i ostrzeżeń w edytorach kodu.
• Platformy e-learningowe: Podkreślanie kluczowych pojęć i definicji w materiałach edukacyjnych.
• Przeglądarki dokumentów: Umożliwienie użytkownikom podświetlania i dodawania adnotacji do tekstu w dokumentach.
• Wyniki wyszukiwania: Podświetlanie wyszukiwanych terminów w wynikach wyszukiwania.
• Wizualizacja danych: Podświetlanie określonych punktów danych lub trendów na wykresach i diagramach.

Najlepsze praktyki i wskazówki

• Używaj opisowych nazw podświetleń: Wybieraj nazwy podświetleń, które jasno wskazują ich cel.
• Czyść podświetlenia, gdy jest to konieczne: Pamiętaj o usuwaniu podświetleń, gdy nie są już potrzebne, aby uniknąć nieoczekiwanych problemów ze stylizacją.
• Optymalizuj wydajność: Unikaj tworzenia nadmiernej liczby zakresów podświetleń, ponieważ może to wpłynąć na wydajność.
• Testuj dokładnie: Testuj swoje niestandardowe style podświetlania w różnych przeglądarkach i na różnych urządzeniach, aby zapewnić kompatybilność i dostępność.
• Rozważ style zastępcze: Zapewnij style zastępcze dla przeglądarek, które jeszcze nie obsługują Custom Highlight API.

Zaawansowane techniki

1. Łączenie wielu podświetleń

Możesz łączyć wiele podświetleń, aby tworzyć bardziej złożone efekty stylizacji. Na przykład, możesz chcieć podświetlić zarówno słowa kluczowe, jak i tekst zaznaczony przez użytkownika za pomocą różnych stylów.

2. Używanie zdarzeń do aktualizacji podświetleń

Możesz używać zdarzeń JavaScript, takich jak mouseover lub click, aby dynamicznie aktualizować zakresy podświetleń na podstawie interakcji użytkownika.

3. Integracja z bibliotekami firm trzecich

Możesz zintegrować Custom Highlight API z bibliotekami firm trzecich, aby tworzyć bardziej zaawansowane rozwiązania do podświetlania. Na przykład, można użyć biblioteki do przetwarzania języka naturalnego (NLP), aby automatycznie identyfikować i podświetlać kluczowe terminy w dokumencie.

Przyszłość stylizacji zaznaczenia tekstu

CSS Custom Highlight API stanowi znaczący postęp w stylizacji zaznaczania tekstu. Umożliwia deweloperom tworzenie bardziej angażujących, dostępnych i świadomych kontekstu interfejsów użytkownika. W miarę jak wsparcie przeglądarek będzie rosło, Custom Highlight API stanie się niezbędnym narzędziem dla deweloperów internetowych na całym świecie.

Podsumowanie

CSS Custom Highlight API otwiera świat możliwości personalizacji doświadczenia zaznaczania tekstu. Rozumiejąc kluczowe pojęcia, eksplorując praktyczne przykłady i uwzględniając wytyczne dotyczące dostępności, możesz wykorzystać to potężne API do tworzenia naprawdę wyjątkowych interfejsów użytkownika. Wykorzystaj Custom Highlight API i wynieś swoje projekty internetowe na nowy poziom.

Eksperymentuj z podanymi przykładami, dostosuj je do swoich specyficznych potrzeb i odkryj pełny potencjał CSS Custom Highlight API. Twoi użytkownicy docenią dbałość o szczegóły i ulepszone doświadczenie użytkownika.